<script setup lang="ts">
import { onMounted, ref} from "vue"
import { useNotification } from "naive-ui"
import { getHomeDetail } from "@/api"

onMounted( () => {
  getHeadHomeDetail()
})

function getHeadHomeDetail() {
  getHomeDetail().then(res => {

  })
}



</script>

<template>
  <div>
    <div class="container-fluid mb-10 mt-5">
      <div class="row gy-4">
        <div class="col-md-3 col-sm-6">
          <div class="card mb-0">
            <div class="card-body">
              <div class="d-flex align-items-end justify-content-between mb-2">
                <div class="me-2">
                  <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                    <use xlink:href="#user-1"> </use>
                  </svg>
                  <p class="text-sm text-uppercase fw-bolder lh-1 mb-0">New Clients</p>
                </div>
                <p class="text-xl lh-1 mb-0 text-dash-color-1">100</p>
              </div>
            </div>
          </div>
        </div>


        <div class="col-md-3 col-sm-6">
          <div class="card mb-0">
            <div class="card-body">
              <div class="d-flex align-items-end justify-content-between mb-2">
                <div class="me-2">
                  <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                    <use xlink:href="#stack-1"> </use>
                  </svg>
                  <p class="text-sm text-uppercase fw-bolder lh-1 mb-0">New Projects</p>
                </div>
                <p class="text-xl lh-1 mb-0 text-dash-color-2">375</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6">
          <div class="card mb-0">
            <div class="card-body">
              <div class="d-flex align-items-end justify-content-between mb-2">
                <div class="me-2">
                  <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                    <use xlink:href="#survey-1"> </use>
                  </svg>
                  <p class="text-sm text-uppercase fw-bolder lh-1 mb-0">New Invoices</p>
                </div>
                <p class="text-xl lh-1 mb-0 text-dash-color-3">140</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6">
          <div class="card mb-0">
            <div class="card-body">
              <div class="d-flex align-items-end justify-content-between mb-2">
                <div class="me-2">
                  <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                    <use xlink:href="#paper-stack-1"> </use>
                  </svg>
                  <p class="text-sm text-uppercase fw-bolder lh-1 mb-0">All Projects</p>
                </div>
                <p class="text-xl lh-1 mb-0 text-dash-color-4 ">41</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid mb-10">
      <div class="row gy-4">
        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <h3 class="h4 mb-0">Credit Sales</h3>
              <p class="text-sm fw-light mb-5">Lorem ipsum dolor sit</p>
              <div class="position-relative text-center">
                <canvas id="pieChartHome1"></canvas>
                <div class="position-absolute top-50 start-50 translate-middle"><strong class="text-lg d-block">$2.145</strong><span class="d-block">Sales</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <h3 class="h4 mb-0">Channel Sales</h3>
              <p class="text-sm fw-light mb-5">Lorem ipsum dolor sit</p>
              <div class="position-relative text-center">
                <canvas id="pieChartHome2"></canvas>
                <div class="position-absolute top-50 start-50 translate-middle"><strong class="text-lg d-block">$7.784</strong><span class="d-block">Sales</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <h3 class="h4 mb-0">Direct Sales</h3>
              <p class="text-sm fw-light mb-5">Lorem ipsum dolor sit</p>
              <div class="position-relative text-center">
                <canvas id="pieChartHome3"></canvas>
                <div class="position-absolute top-50 start-50 translate-middle"><strong class="text-lg d-block">$4.957</strong><span class="d-block">Sales</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>



<style>
.container-fluid {
  color: #2F80ED;
}

</style>
